 <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        #app{
            width: 100%;
            float: left;
            background: #f4f4f4;
        }
        .height25 {
            width: 100%;
            height: 2.5rem;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
        }

        .user_box {
            width: 100%;
            margin-top: 0rem;
        }
        /***user_banner***/

        .user_banner {
            width: 100%;
            height: 17.5rem;
            position: relative;
            background-image: -webkit-linear-gradient(left, #fb705d 0%, #f72f72 100%);
            background-image: -o-linear-gradient(left, #fb705d 0%, #f72f72 100%);
            background-image: linear-gradient(to right, #fb705d 0%, #f72f72 100%);
        }

        .user_tx {
            width: 4.9rem;
            position: absolute;
            top: 3.3rem;
            left: 1.85rem;
        }
        .user_tx img{
            width: 4.9rem;
            height: 4.9rem;
            border-radius: 50%;
        }
        .user_rz {
            width: 6rem;
            line-height: 1.6rem;
            background-color: #a7a7a7;
            border-radius: 0.8rem;
            font-size: 0.9rem;
            color: #fff;
            text-align: center;
            position: absolute;
            left: 1.3rem;
            top: 7.65rem;
        }

        .user_xx {
            position: absolute;
            top: 3.5rem;
            left: 7.9rem;
        }

        .user_xx h5 {
            font-size: 1.9rem;
            color: #fff;
            line-height: 1;
            margin-bottom: 0.6rem;
        }

        .user_xx span {
            width: 10.6rem;
            line-height: 2.1rem;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 1.05rem;
            text-align: center;
            font-size: 1.1rem;
            color: #fff;
        }

        .user_xx span img {
            width: 1rem;
            margin-right: 0.5rem;
            margin-top: 0.45rem;
            display: inline-block;
            vertical-align: top;
        }

        .user_right {
            position: absolute;
            top: 3.25rem;
            right: 1.3rem;
        }

        .user_right span {
            display: inline-block;
            width: 1.7rem;
            margin-left: 1rem;
            position: relative;
        }

        .user_right span font {
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            border-radius: 50%;
            text-align: center;
            position: absolute;
            top: -0.5rem;
            right: -0.5rem;
            background: #ed6a20;
            font-size: 1rem;
            color: #fff;
        }

        .user_con {
            position: absolute;
            left: 4.3rem;
            right: 4.3rem;
            top: 10.3rem;
        }

        .user_con ul {
            width: 100%;
        }

        .user_con ul li {
            width: 33.33%;
            float: left;
            text-align: center;
        }

        .user_con ul li h5 {
            font-size: 1.5rem;
            line-height: 1;
            color: #fff;
            margin-bottom: 1rem;
        }

        .user_con ul li p {
            font-size: 1.2rem;
            color: #ffffff;
            line-height: 1;
        }
        /***user_banner***/
        /***user_order***/

        .user_order {
            width: calc(100% - 2.6rem);
            margin: 0 auto;
            margin-top: -2rem;
            margin-bottom: 1rem;
            background: #fff;
            position: relative;
            z-index: 2;
            border-radius: 0.7rem;
            padding: 1.2rem 1.2rem 2rem 1.2rem;
            box-shadow: 0px 2px 0.9rem 1px rgba(184, 183, 183, 0.25);
        }

        .user_order h5 {
            font-size: 1.4rem;
            letter-spacing: 0.05rem;
            color: #000;
            line-height: 1;
            padding-bottom: 1.2rem;
            margin-bottom: 1.8rem;
            position: relative;
        }

        .user_order h5::before {
            content: '';
            position: absolute;
            left: 0;
            right: -1.3rem;
            bottom: 0;
            background: #efefef;
            height: 1px;
        }

        .user_order h5 span {
            float: right;
            font-size: 1.2rem;
            color: #999;
            line-height: 1;
            letter-spacing: 0.05rem;
            position: relative;
            top: -0.2rem;
        }

        .user_order h5 span img {
            display: inline-block;
            width: 0.7rem;
            margin-left: 0.7rem;
            position: relative;
            top: 0.15rem;
        }

        .user_order ul {
            width: 100%;
        }

        .user_order ul li {
            width: 20%;
            float: left;
        }

        .user_order ul li img {
            margin: 0 auto;
        }

        .user_order ul li span {
            display: block;
            text-align: center;
            margin-top: 1.3rem;
            font-size: 1.2rem;
        }
        /***user_order***/
        /***user_money***/

        .user_money {
            width: calc(100% - 2.6rem);
            margin: 0 auto;
            margin-bottom: 1rem;
            background: #fff;
            border-radius: 0.7rem;
            padding: 1.2rem 1.2rem 2rem 1.2rem;
            box-shadow: 0px 2px 0.9rem 1px rgba(184, 183, 183, 0.25);
        }

        .user_money h5 {
            font-size: 1.4rem;
            letter-spacing: 0.05rem;
            color: #000;
            line-height: 1;
            padding-bottom: 1.2rem;
            margin-bottom: 1.8rem;
            position: relative;
        }

        .user_money h5::before {
            content: '';
            position: absolute;
            left: 0;
            right: -1.3rem;
            bottom: 0;
            background: #efefef;
            height: 1px;
        }

        .user_money h5 span {
            float: right;
            font-size: 1.2rem;
            color: #999;
            line-height: 1;
            letter-spacing: 0.05rem;
            position: relative;
            top: -0.2rem;
        }

        .user_money h5 span img {
            display: inline-block;
            width: 0.7rem;
            margin-left: 0.7rem;
            position: relative;
            top: 0.15rem;
        }

        .user_money ul {
            width: 100%;
        }

        .user_money ul li {
            width: 25%;
            float: left;
        }

        .user_money ul li img {
            margin: 0 auto;
        }

        .user_money ul li span {
            display: block;
            text-align: center;
            margin-top: 1.3rem;
            font-size: 1.2rem;
        }
        /***user_money***/
        /***user_sz***/

        .user_sz {
            width: calc(100% - 2.6rem);
            margin: 0 auto;
            margin-bottom: 1.3rem;
            background: #fff;
            border-radius: 0.7rem;
            padding: 0 1.2rem;
            box-shadow: 0px 2px 0.9rem 1px rgba(184, 183, 183, 0.25);
        }

        .user_sz ul {
            width: 100%;
        }

        .user_sz ul li {
            padding: 0 2rem;
            position: relative;
            line-height: 4.5rem;
            font-size: 1.4rem;
            color: #333;
        }

        .user_sz ul li::before {
            content: '';
            position: absolute;
            left: 1rem;
            right: 0;
            bottom: 0;
            background: #efefef;
            height: 1px;
        }

        .user_sz ul li span {
            width: 0.7rem;
            float: right;
            margin-top: 1.6rem;

        }
        /***user_sz***/

        .show {
            display: block!important;e
        }

        #app {
            display: none
        }
        .choice_true{
            background: #ed6a20;
        }
    </style>
</head>

<body>
    <div id="app" :class="ready==1?'show':''">
        <div class="height25"></div>

        <div class="aui-refresh-content">
            <div class="user_box">

                <!--user_banner-->
                <div class="user_banner">
                    <div class="user_tx" onclick="go_url('myself_info','./set/my_information/myself_info.html')">
                        <img :src="user_info.head_img" width="100%">
                    </div>
                    <div class="user_rz" :class="is_real_name?'choice_true':''"  onclick="go_url('real_choice','./set/real_name/real_choice.html')">
                        {{is_real_name?"已认证":"去实名认证"}}
                    </div>
                    <div class="user_xx" onclick="go_url('myself_info','./set/my_information/myself_info.html')">
                        <h5>{{user_info.username}}</h5>
                        <span><img src="../../image/phone_icon.png">{{user_info.telephone}}</span>
                    </div>
                    <div class="user_right">
                        <span><img src="../../image/shezhi.png" width="100%" onclick="go_url('setting','./set/setting.html')"></span>
                        <span><img src="../../image/search_info1.png" width="100%" onclick="go_url('set_myInfo_my_info','./set/myInfo/my_info.html')"><font>5</font></span>
                    </div>
                    <div class="user_con">
                        <ul class="clearfix">
                            <li onclick="go_url('bookmark','./set/my_collection/bookmark.html')">
                                <h5>7</h5>
                                <p>商品收藏</p>
                            </li>
                            <li onclick="go_url('bookmark','./set/my_collection/bookmark.html')">
                                <h5>32</h5>
                                <p>店铺关注</p>
                            </li>
                            <li>
                                <h5>8</h5>
                                <p>我的评价</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--/user_banner-->


                <!--user_order-->
                <div class="user_order">
                    <h5>我的订单 <span @click="goOrder_all()">查看全部订单<img src="../../image/go.png"></span></h5>
                    <ul class="clearfix">
                      <li @click="goOrder(index)" v-for="(item,index) in list" :key="index">
                          <img :src="item.img" :style="item.style">
                          <span :style="item.span">{{item.text}}</span>
                      </li>
                    </ul>
                </div>
                <!--/user_order-->


                <!--user_money-->
                <div class="user_money">
                    <h5>我的钱包 <span @click="go_url('capital_my_capital','./capital/my_capital.html','')">查看全部<img src="../../image/go.png"></span></h5>
                    <ul class="clearfix">
                        <li @click="go_url('capital_recharge','./capital/recharge.html','put_forward')">
                            <img src="../../image/user_money_1.png" style="width:2.5rem;">
                            <span>提现申请</span>
                        </li>
                        <li @click="go_url('capital_details','./capital/capital_details.html','')">
                            <img src="../../image/user_money_2.png" style="width:2.5rem;">
                            <span>资金明细</span>
                        </li>
                        <li @click="go_url('capital_bank_card','./capital/bank_card.html','')">
                            <img src="../../image/user_money_3.png" style="width:2.5rem;">
                            <span>银行卡</span>
                        </li>
                        <li @click="go_url('capital_recharge','./capital/recharge.html','recharge')">
                            <img src="../../image/user_money_4.png" style="width:2.5rem;">
                            <span>余额充值</span>
                        </li>
                    </ul>
                </div>
                <!--/user_money-->


                <!--/user_sz-->
                <div class="user_sz">
                    <ul>
                        <li onclick="go_url('customer_service','./set/myInfo/cs.html')">我的客服<span><img src="../../image/go.png" width="100%"></span></li>
                        <li onclick="openframeinstance(2,'share/index.html',4)">我的分销<span><img src="../../image/go.png" width="100%"></span></li>
                        <li>商家中心<span><img src="../../image/go.png" width="100%"></span></li>
                        <li onclick="go_url('set_account_account','./set/account/account.html')">账号管理<span><img src="../../image/go.png" width="100%"></span></li>
                        <li>清除缓存</li>
                    </ul>
                </div>
                <!--/user_sz-->
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/sha1.js"></script>
<script type="text/javascript">

    apiready = function() {
        var token = $api.getStorage('token');
        if (token){
            vue(token)
        } else {
            api.openWin({
                name: 'user_login',
                url: './login/login.html',
                pageParam: {}
            });
        }
        // setRefresh()
        api.addEventListener({
            name: 'token'
        }, function(ret, err) {

            var token = ret.value.token
            if(token){
                vue(token)
            }else {
                // console.log(JSON.stringify(ret.value))
                setTimeout(function(){
                      window.location.reload();
                },500)

            }
        });
        // console.log(token)
    }

    function vue(token) {
        var vue = new Vue({
            el: "#app",
            data: {
                user_info: {},
                ready: 0,
                list:[
                  {img:'../../image/user_order_1.png',text:'待付款',style:'width:2.35rem;position: relative;top:-0.33em',span:'position:relative;top:-0.43em'},
                  {img:'../../image/user_order_2.png',text:'待发货',style:'width:2.45rem'},
                  {img:'../../image/user_order_3.png',text:'待收货',style:'width:2.35rem'},
                  {img:'../../image/user_order_4.png',text:'待评价',style:'width:1.95rem',span:'position:relative;top:-0.13em'},
                  {img:'../../image/user_order_5.png',text:'退款/售后',style:'width:2.4rem'}
                ],
                is_real_name:false  //是否实名
            },
            mounted: function() {
                api.addEventListener({
                    name: 'update_user_info'
                }, function(ret, err) {
                    if(ret.value.info=="updata"){
                        that.user_info=$api.getStorage('user_info')
                    }
                });

                console.log(token)
                var data = {
                    token: token
                }
                var that = this
                that.ready = 1
                Axios.post(window.Url.realname, data).then(function(res){  //判断是否实名
                    console.log(JSON.stringify(res));
                    if (res.status == 1) {
                        var is_real_name = true
                        that.is_real_name = is_real_name
                        $api.setStorage('is_real_name', is_real_name);
                    }else {
                        console.log(res)
                          $api.rmStorage('is_real_name');
                    }
                })
                Axios.post(window.Url.info, data).then(function(res){  //获取用户信息
                    console.log(JSON.stringify(res));
                    if (res.status == 1) {
                        that.user_info = res
                        get_rong_token(res)
                        $api.setStorage('user_info', res);
                    }else {
                        api.openWin({
                            name: 'user_login',
                            url: './login/login.html',
                            pageParam: {}
                        });
                    }
                })

            },

            methods:{
              //跳转订单分类
              goOrder:function(index,onlyId){
                console.log(onlyId)
                console.log(index)
                var index = index
                if(index<4){
                  api.openWin({
                          name: 'user_order',
                          url: './user_order.html',
                          pageParam: {
                              id: index
                          }
                      });
                }

              },
              // 全部订单
              goOrder_all:function(){
                var index = -1
                api.openWin({
                        name: 'user_order',
                        url: './user_order.html',
                        pageParam: {
                            id: index
                        }
                    });
              }

            }
        })
    }
    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }



    function go_url(name, url, get) {
        // console.log(get);
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                data: get,
            }
        });
    }
    function get_rong_token(user_info) {  //获取融云token
        // console.log(JSON.stringify(user_info));
        var userId = user_info.user_id; //会员id
        var name = user_info.username; //会员昵称
        var portraitUri = user_info.head_img; //会员头像
        var appKey = "n19jmcy5n87b9";   //融云appkey
        var appSecret = "NNaI2AAQB8";//融云appSecret
        var nonce = Math.floor(Math.random() * 1000000);//随机数
        var timestamp = Date.now(); //时间戳
        // console.log(timestamp)
        var signature = SHA1("" + appSecret + nonce + timestamp);//数据签名(通过哈希加密计算)
        api.ajax({
                url : "http://api.cn.ronghub.com/user/getToken.json",
                method : "post",
                headers : {
                        "RC-App-Key" : appKey,
                        "RC-Nonce" : "" + nonce,
                        "RC-Timestamp" : "" + timestamp,
                        "RC-Signature" : "" + signature,
                        "Content-Type" : "application/x-www-form-urlencoded"
                },
                data : {
                        values : {
                                userId : userId,
                                name : name,
                                portraitUri : portraitUri
                        }
                }
        }, function(ret, err) {
                if (ret) {
                    // console.log(JSON.stringify(ret))  //获取融云token
                    $api.setStorage('rong_token', ret.token);//将token存储到本地
                } else {
                        alert("获取token失败")
                }
        });
    }
    // 打开frame
    function openframeinstance(index,name,d_index){
        api.sendEvent({
            name: 'change_tab',
            extra: {
                index:index,  //前往主页index
                name:name,  //当前主页路径
                d_index:d_index, //当前主页index
            }
        });
    }
</script>
